let { resolve } = require('path');
HtmlWebPackPlugin = require('html-webpack-plugin');
MiniCssExtractPlugin = require('mini-css-extract-plugin'); //提取css
OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); //压缩css

//设置node环境变量
// process.env.NODE_ENV="development"

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'js/build.js',
        path: resolve(__dirname, 'build'),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    /**
                     * css兼容性处理：postcss-->postcss-loader,postcss-preset-env
                     * postcss-preset-env帮postcss找到browserslist里面的配置，通过配置加载指定css兼容性样式
                     *   "browserslist": {
                     *   //开发环境-->设置node环境变量：process.env.NODE_ENV="development"
                            "development": [
                              "last 1 chrome version",//兼容最近一个版本的chrome
                              "last 1 firefox version",//兼容最近一个版本的火狐
                              "last 1 safari version"//兼容最近一个版本的ie
                            ],
                            //生产环境：默认是生产环境
                            "production": [
                              ">0.2%",//大于0.2%基本上市场上所有的
                              "no dead",//已死的浏览器
                              "no op_mini all"//不要op_min的
                            ]
                          }
                     */
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: () => [require('postcss-preset-env')()],
                        },
                    },
                ],
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: () => [require('postcss-preset-env')()],
                        },
                    },
                    'less-loader',
                ],
            },
            {
                test: /\.(img|png|pdf)$/,
                loader: 'url-loader',
                options: {
                    limit: '9*1020',
                    name: '[hash:10].[ext]',
                    outputPath: 'img',
                    esModule: false,
                },
            },
            {
                test: /\.html$/,
                loader: 'html-loader',
            },
            {
                exclude: /\.(html|css|less|png|img|pdf|js)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'media',
                },
            },
        ],
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: './src/index.html',
        }),
        new MiniCssExtractPlugin({
            filename: 'css/index.css',
        }),
        new OptimizeCssAssetsWebpackPlugin(),
    ],
    // devServer: {
    //     contentBase:resolve(__dirname,"build"),
    //     compress:true,
    //     port:3000,
    //     open:true
    // },
    mode: 'production',
};
